<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport"
        content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no" />
    <title>活动页</title>
</head>

<body>
    <div id="app">
        <main class="action">
            <article>
                <section class="banner">
                    <img src="../src/pages/action/img/banner.jpg" />
                </section>
                <section class="box" @click="goBox">
                    <img class="box-title" src="../src/pages/action/img/box-title.png" />
                    <section class="good-list">
                        <div class="good" v-for="(item,index) in goodList" :key="index">
                            <img :src="item.goods_image"/>
                        </div>
                    </section>
                    <section class="box-btn"></section>
                </section>
            </article>
            <article class="list">
                <img class="list-title" src="../src/pages/action/img/title.png" />
                <div class="magic-bag-container" v-for="(item,index) in info.list" @click="goApp(item.id)">
                    <div class="image-wrapper">
                        <img class="magic-img" :src="item.list_img" mode="aspectFit" />
                        <div class="tag hot-bg" v-if="item.list_label==2">
                            <span class="tag-span">HOT</span>
                        </div>
                        <div class="tag new-bg" v-if="item.list_label==1">
                            <span class="tag-span">NEW</span>
                        </div>
                    </div>
                    <div class="box-info">
                        <span class="title ellipsis">{{item.title}}</span>
                        <span class="desc ellipsis-line2">{{item.desc}}</span>
                        <div class="box-bottom">
                            <div class="box-bottom-left">
                                <span class="unit-icon"></span>
                                <div class="price">
                                    <span class="price-span">{{item.price}}</span>
                                </div>
                            </div>
                            <span class="buy-number">{{item.manyOrder}}人已经购买</span>
                        </div>
                        <div class="image-list-wrapper">
                            <img v-for="(tItem,index) in item.manyGoods.slice(0,5)" :key="index" class="product-img"
                                :src="tItem.goods_image" mode="aspectFit" />
                        </div>
                    </div>
                </div>
                <div v-if="info.isFinish">
                    <p class="list-bottom">亲，已经到底了哦~</p>
                    <img class="more-package" src="../src/pages/action/img/more-package.png">
                </div>
            </article>
            <footer class="footer">
                <p class="title">新专享礼活动规则说明</p>
                <p class="content">
                    1、新人专享福利仅限平台新用户（是指在福袋星球上，从未抽过魔礼福袋的用户）参与；<br /> 2、每个新用户限一次参与机会，老用户不享受本次活动福利；<br />
                    3、魔礼福袋邮费15元，满3件可享包邮。
                </p>
            </footer>
            <div v-if="wxShow" class="wx_tips">
                <img src="../src/pages/action/img/tips_img.png" alt="提示浏览器打开">
            </div>
        </main>
    </div>
</body>
<script>
    var _hmt = _hmt || [];
    (function () {
        var hm = document.createElement("script");
        hm.src = "https://hm.baidu.com/hm.js?4ecb5c83fde24dabb5aaa5ce004c07a0";
        var s = document.getElementsByTagName("script")[0];
        s.parentNode.insertBefore(hm, s);
    })();
</script>
</html>